
import { Select, Progress, Popover, Message, Tag } from '@arco-design/web-react';

import { Iconcard, Iconcart, Iconchange, Iconfly, IconiconPauseCircle, Iconmoney, IconPowerOn, IconRefresh, Iconsome } from '../components/icon/svgIcon';
import Page from '../components/page';
import { useEffect, useRef, useState } from 'react';
import InProgress from './components/inProgress';
import main from '../main';
import { CardDetail } from '../types';
import { handleRefreshSystemData } from './components/refresh/common';
import { handleOpenOrStop } from './components/powerOn/common';
import CardDetailProgressDialog from './components/refresh/cardDetailProgressDialog';
import BatchCardBuyOrderDialog from './components/buyOrder/batchCardBuyOrderDialog';
import ImportFileDialog from '../components/importFileDialog';
import { useSearchParams } from 'react-router-dom';
import { apiGetCardDetails, apiGetCardIccidList } from '../api';
import { copyToClipboard, dictTag, flowKTOG, getDict, getLocCardInfo, maskMiddle, setLocCardInfo } from '../utils/utils';
import CardPackInfoDialog from './components/packInfo/cardPackInfoDialog';
import LoadingMask from '../components/loadingMask';
import PreSetConvertUrlDialog from './components/setConvertUrl/preSetConvertUrlDialog';
import CardDetailWalletRefundApplyDetailPage from './components/refundApply/cardDetailWalletRefundApplyDetailPage';
import { handleSetTag } from './components/noShutdown/common';
import CardOtherDetailDialog from './components/cardOtherDetailDialog';
import CardPayLimitRecordDialog from './components/payLimitRecord/cardPayLimitRecordDialog';
import ConsumptionLog from './components/consumptionLog';
import OrderLog from './components/orderLog';
import CardTransferAnyCreateDialog from '../components/cardTransferAnyCreateDialog';
import Cookies from 'js-cookie';
import ViewFrozenStatusDialog from './components/viewFrozenStatus/viewFrozenStatusDialog';
const Option = Select.Option;

interface Props {

}
const OPERATOR_TYPE = 'operator_type';
const TRANSACTION_TYPE = 'transaction_type';
const CARD_STATUS = 'card_status';
const PRD_COMMON_STATUS = 'prd_common_status';
const CHARGE_STATUS = 'charge_status';
const REAL_STATUS = 'real_status';
const CARD_ACCOUNT_STATUS = 'card_account_status';
const SYS_USER_SEX = 'sys_user_sex';
export default function HomePage({ }: Props) {
  const [searchParams] = useSearchParams();
  // const token = '0880a74e-e8ea-4548-8a75-c941846e38b4'
  // main.token = token
  // Cookies.set('Admin-Token', token)
  const [details, setDetails] = useState<CardDetail>({})
  const [iccidList, seticcidList] = useState<any[]>([])
  const pageId = searchParams.get('pageId') || ''
  const [iccid, seticcid] = useState<string>(searchParams.get('iccid') || '')
  const [dictDatas, setDictDatas] = useState<Record<string, any>>({});
  const [errorMsg, seterrorMsg] = useState<string>('');
  const pageRef = useRef<any>(null);
  main.pageId = pageId
  // 查看详情信息弹窗
  const [cardOtherDetailDialogShow, setCardOtherDetailDialogShow] = useState<boolean>(false);
  useEffect(() => {
    LoadingMask.show('正在查询中...');

    window.addEventListener('message', (e) => {
      if (e.data && e.data?.type === 'token') {
        if (e.data.code === 200) {
          main.token = e.data.token;
          Cookies.set('Admin-Token', e.data.token)
          pageRef.current = e.data
          getDetails(true)
          getList()
        } else {
          LoadingMask.hide();
          seterrorMsg(e.data.msg)
        }

      }
    });

    getDetails(true)
    getList()

  }, [iccid, pageId])


  const changeStatusOptions = [
    { dictValue: "0", dictLabel: "正常" },
    { dictValue: "1", dictLabel: "需要转卡" },
    { dictValue: "2", dictLabel: "转卡中" },
    { dictValue: "3", dictLabel: "转卡完成" },
    { dictValue: "9", dictLabel: "转卡异常" },
  ]
  async function getList() {
    const res1 = await apiGetCardIccidList({
      iccid: iccid
    })
    const data2 = res1?.data?.data || []
    seticcidList(data2 || [])
  }
  async function getDetails(isCache?: boolean) {
    if (!pageRef.current?.token) {
      return window.parent.postMessage({ type: 'token', id: pageId }, '*');
    }
    async function fetchDictData() {
      const data = await getDict(
        OPERATOR_TYPE,
        TRANSACTION_TYPE,
        CARD_STATUS,
        PRD_COMMON_STATUS,
        CHARGE_STATUS,
        REAL_STATUS,
        CARD_ACCOUNT_STATUS,
        SYS_USER_SEX,
      );
      setDictDatas(data);
    }

    fetchDictData();
    LoadingMask.show('正在查询中...');
    let data: any = getLocCardInfo(iccid)

    if (!(data && isCache)) {

      const res = await apiGetCardDetails({
        iccid: iccid
      })


      if (res?.data?.code !== 200) {
        Message.error(res?.data?.msg)
      }

      const data1 = res?.data?.data || {}
      setDetails(data1 || {})
      setLocCardInfo(data1, iccid)


    } else {
      setDetails(data || {})
    }
    LoadingMask.hide();
  }
  function getItems(title: string, value: string | number | React.ReactNode, className?: any, children?: any) {
    return <div className={(className && className.boxClassName) ? `${className.boxClassName}` : 'item-width'}>
      <div className={`${className?.titleClassName} info-title`}>
        {title}
      </div>
      <div className={`${className?.valueClassName} info-value`}>
        {value ? value : '-'}{children}
      </div>
    </div>
  }
  // 导入弹窗
  const [importDialogShow, setImportDialogShow] = useState(false);
  const [giveCouponDialogShow, setgiveCouponDialogShow] = useState<boolean>(false)
  // 套餐信息弹窗
  const [packInfoDialogShow, setPackInfoDialogShow] = useState<CardDetail>();
  // 卡操作之后的进度弹窗
  const [cardDetailProgressDialogShow, setCardDetailProgressDialogShow] = useState<string>();
  // 卡批量手动订购 导文件
  const [batchCardBuyOrderDialogShow, setBatchCardBuyOrderDialogShow] = useState(false);
  // 推广信息弹窗
  const [convertUrlToolDialogShow, setConviertUrlToolDialogShow] = useState<CardDetail>();
  // 支付限制弹窗
  const [cardPayLimitRecordDialogShow, setCardPayLimitRecordDialogShow] = useState<CardDetail>();
  const [transferCardCreateDialogShow, setTransferCardCreateDialogShow] = useState(false);
  const [cardDetailWalletRefundApplyShow, setcardDetailWalletRefundApplyShow] = useState<CardDetail>();
  const [activeTab, setactiveTab] = useState('处理中任务')
  const [timers, settimers] = useState(0);
  const handlePowerBtnClick = () => {

    if (timers > 0) {
      return Message.warning(`请勿重复点击按钮,需等${timers}秒后重试`);
    }
    handleOpenOrStop(details, () => {
      getDetails()
    });
    settimers(5)
    // 启动倒计时
    const timer = setInterval(() => {
      settimers(prev => {
        const newTime = prev - 1;
        if (newTime <= 0) {
          clearInterval(timer);
          return 0;
        }
        return newTime;
      });
    }, 1000);
  };
  const buttonList = [{
    title: '刷新',
    icon: <IconRefresh className="vertical-align-middle mr-3" style={{ width: 14, height: 14 }} />,
    onClick: () => {
      handleRefreshSystemData(details, () => {
        getDetails()
      })
    }
  }, {
    title: details.cardStatus == '4' && Number(details?.totalFlow) > 0 && Number(details?.packageId) > 0 ? '开机' : '关机',
    icon: <IconPowerOn className="vertical-align-middle mr-2" style={{ width: 18, height: 18 }} />,
    onClick: handlePowerBtnClick
  },
  {
    title: '手动订购',
    icon: <Iconcart className="vertical-align-middle mr-3" style={{ width: 16, height: 16 }} />,
    onClick: () => {
      setBatchCardBuyOrderDialogShow(true)
    }
  },
  // {
  //   title: '赠送卡券',
  //   icon: <Iconcard className="vertical-align-middle mr-3" style={{ width: 18, height: 18 }} />,
  //   onClick: () => {
  //     setgiveCouponDialogShow(true)
  //   }
  // }, 
  {
    title: '查看冻结状态',
    icon: <Iconcard className="vertical-align-middle mr-3" style={{ width: 18, height: 18 }} />,
    onClick: () => {
      setgiveCouponDialogShow(true)
    }
  },

  {
    title: '转卡申请',
    icon: <Iconchange className="vertical-align-middle mr-3" style={{ width: 18, height: 18 }} />,
    onClick: () => {
      setTransferCardCreateDialogShow(true)
    }
  },
  {
    title: '推广预设',
    icon: <Iconfly className="vertical-align-middle mr-3" style={{ width: 16, height: 16 }} />,
    onClick: () => {
      setConviertUrlToolDialogShow(details)
    }
  },
  {
    title: '申请退款',
    icon: <Iconmoney className="vertical-align-middle mr-3" style={{ width: 16, height: 16 }} />,
    onClick: () => {
      setcardDetailWalletRefundApplyShow(details)
    }
  },
  {
    title: '月底不停机',
    icon: <IconiconPauseCircle className="vertical-align-middle mr-3" style={{ width: 16, height: 16 }} />,
    onClick: () => {
      handleSetTag(details, () => {
        getDetails()
      })
    }
  }]
  const tabsList = [{
    title: "处理中任务",
    children: <InProgress info={details} getDetails={getDetails} />,
    onClick: () => {

    }
  },
  {
    title: "订购信息",
    children: <OrderLog iccid={iccid} />,
    onClick: () => {

    }
  },
  // {
  //   title: "充值记录",
  //   children: <RechargeLog iccid={iccid} />,
  //   onClick: () => {

  //   }
  // },
  {
    title: "充消记录",
    children: <ConsumptionLog iccid={iccid} />,
    onClick: () => {

    }
  }
  ]
  function getPercent(usedFlow: number, totalFlow: number) {
    return (usedFlow / totalFlow) * 100
  }


  if (errorMsg) {
    return <div className='text-center pt-100'>{errorMsg}</div>
  }

  return (
    <Page
      className="home-page d-flex-c"
      contentClassName="flex-1 h-1"
      style={{
        backgroundRepeat: 'no-repeat',
        backgroundColor: '#f3f9fe',
      }}
      appBar={false}
    >


      <div className='p-10 bw-100 bh-100 d-flex-c'>
        <div className=' page-box overflow-y position-relative ' >
          <div className=' jc-between bw-100  d-flex-r ai-start flex-wrap' style={{
            rowGap: '0px',
            columnGap: '0px'
          }}>
            {
              buttonList.map((item, index) => {
                if (buttonList.length > 8 && index === 7) {
                  return <Popover
                    trigger='click'
                    position="bottom"
                    content={
                      buttonList.slice(7)?.map(i => {
                        return <div className="bg-white item-width2 mb-10 cursor-pointer omit-text button" title={i.title} key={i.title} onClick={i.onClick}>
                          {i.icon}
                          {i.title}
                        </div>
                      })
                    }
                  >
                    <div className="bg-white mb-10 item-width2 omit-text cursor-pointer button" title={"更多"} key={"更多"}>
                      <Iconsome className="vertical-align-middle mr-3" style={{ width: 16, height: 16 }} />
                      更多
                    </div>
                  </Popover>
                } else if (index <= 7) {
                  return <div className="bg-white mb-10 cursor-pointer item-width2 omit-text button" title={item.title} key={item.title} onClick={item.onClick}>
                    {item.icon}
                    {item.title}
                  </div>
                } else {
                  return null
                }

              })
            }

          </div>
        </div>

        <div className='page-box d-flex-r ai-center'>
          <Select
            placeholder='请选择'
            // style={{ width: 'calc(100% - 120px)' }}
            value={iccid}
            className={'select flex-1'}
            allowCreate
            onChange={(value) => {
              const newIccid = value;
              seticcid(value)
              // 如果新输入的值不在 iccidList 中，则添加进去
              seticcidList(prevList => {
                if (newIccid && !prevList.includes(newIccid)) {
                  return [...prevList, newIccid];
                }
                return prevList;
              });
            }

            }
          >
            {Array.from(new Set(iccidList))?.map((option: any) => (
              <Option key={option.iccid} value={option.iccid}>
                {option.iccid} <span className="ml-5">{dictTag(option.cardStatus, dictDatas[CARD_STATUS])}</span>
              </Option>
            ))}
          </Select>
          <span className='bg-white vertical-align-middle text-center cursor-pointer'
            style={{ width: 119, height: "35px", borderLeft: "1px solid #D8D8D8", display: 'inline-block', lineHeight: '35px' }}
            onClick={() => getDetails()}>
            <IconRefresh className="vertical-align-middle " style={{ width: 14, height: 14 }} />
            <span className='m-l-8'>获取最新</span>

          </span>
        </div>

        <div className='margin-t-10 page-box overflow-y position-relative flex-1 h-1' >

          <div className='bg-white p-10 border-radius-10 jc-between bw-100 bh-100 d-flex-r ai-start flex-wrap' style={{
            rowGap: '10px',
            columnGap: '20px'
          }}>

            {getItems(
              '充值卡号',
              <span onClick={() => { copyToClipboard(iccid || '') }} className='cursor-pointer'>{iccid}</span>,

              {},

            )}
            {getItems(
              '标签',
              details.tagNames ? details.tagNames?.split(',')?.map((item: any) => <Tag key={item} color='red'>{item}</Tag>) : '--',
              {},
            )}
            {getItems(
              'ICCID',
              <span onClick={() => { copyToClipboard(details?.msisdn || '') }} className='cursor-pointer'>{maskMiddle(details?.msisdn || '', 5, 5)}</span>,

              {},
              // <IconSearch className="vertical-align-top cursor-pointer" style={{ width: 24, height: 24 }} onClick={() => {
              //   setCardOtherDetailDialogShow(true)
              // }} />
            )}
            {getItems(
              '手机号',
              <span onClick={() => { copyToClipboard(details?.phonenumber || '') }} className='cursor-pointer'>{details?.phonenumber}</span>,

            )}
            {getItems(
              '卡状态',
              dictTag(details.cardStatus, dictDatas[CARD_STATUS]),
              {},
              // <IconRefresh className="vertical-align-middle m-l-8 cursor-pointer" style={{ width: 14, height: 14 }} onClick={() => {

              // }} />
            )}
            {getItems(
              '实名状态',
              dictTag(details.realStatus, dictDatas[REAL_STATUS]),
              // `${details.realStatus === 'Y' ? '已实名' : '未实名'}${details?.realStatus === 'Y' && details.realTime ? `(${details.realTime})` : ''}`
            )}
            {getItems(
              '代理名称',
              details?.userName
            )}
            {getItems(
              '注册姓名',
              details.realName,

            )}
            {getItems(
              '运营商',
              dictTag(details.operatorType, dictDatas[OPERATOR_TYPE]),
            )}
            {/* {getItems(
              '首充时间',
              details.chargeTime ? dayjs(details.chargeTime).format('YYYY/MM/DD HH:mm:ss') : '未首充'
            )} */}
            {getItems(
              '卡产品名',
              <div className="ml-5 cursor-pointer" onClick={(e) => copyToClipboard((details?.productName || ''))}>
                <span >
                  {details?.productName || ''}
                </span>
                {/* {'-' + (details?.cardProductName || '')} */}
                {/* <IconSearch className="vertical-align-top cursor-pointer" style={{ width: 24, height: 24 }} onClick={(e: any) => {
                  e.stopPropagation()
                  setPackInfoDialogShow(details)
                }} /> */}
              </div>,
              {
                boxClassName: 'bw-100',
              },

            )}
            {getItems(
              '转卡状态',
              dictTag(details.changeStatus, changeStatusOptions),
            )}
            {getItems(
              '首充状态',
              dictTag(details.chargeStatus, dictDatas[CHARGE_STATUS]),
            )}
            {getItems(
              '官方状态',
              <div>
                <div>{dictTag(details.cardOfficialStatus, dictDatas[CARD_STATUS])}</div>
                <div>{details.selectOfficialTime}</div>
              </div>
            )}

            {/* {getItems(
              '冻结状态',
              details?.freezeStatus === 'Y' ? '是' : '否'
            )} */}
            {/* {getItems(
              '停机原因',
              details?.stopReason
            )} */}
            {/* {getItems(
              '超量不停机',
              details?.limitDeductStatus === 'Y' ? '是' : '否'

            )} */}
            {/* {getItems(
              '限制内容',
              (details?.limitRecordCount || '0') + '条',
              {},
              <IconSearch className="vertical-align-top cursor-pointer" style={{ width: 24, height: 24 }} onClick={() => {
                setCardPayLimitRecordDialogShow(details)
              }} />
            )} */}
            {getItems(
              '上级反馈',
              <div className="ml-5">
                {(details.cardStatusRemark ?? '')}
                {/* <div className="text-cyan-color">
                  {details.taskMqCardDetail?.updateTime ? `更新时间:${details.taskMqCardDetail?.updateTime}` : ''}
                </div> */}
              </div>,
              {
                boxClassName: 'bw-100'
              }
            )}
          </div>
          <div className='bg-white p-10 border-radius-10 margin-t-10 jc-between   d-flex-r ai-start flex-wrap' style={{
            rowGap: '10px',
            columnGap: '20px'
          }}>
            <div className='bw-100'>
              <div className='jc-between d-flex-r'>
                <span style={{ color: '#91929E' }}>已用流量:{flowKTOG(details.usedFlow).toFixed(2)}G</span>
                <span style={{ color: '#91929E' }}>剩余流量:{flowKTOG(details.surplusFlow).toFixed(2)}G</span>
              </div>

              <Progress percent={
                // (Number(details.usedFlow) / Number(details.totalFlow)).toFixed(2)
                getPercent(Number(details.usedFlow), Number(details.totalFlow))
              } animation trailColor="#E6EDF5" width='100%' size="large" color="#3F8CFF" showText={false} />

            </div>

            {/* {getItems(
              '基础包',
              getCurrentCardPackOrderDetail('basicpackage', 'num') + 'G',
              {
                boxClassName: 'd-flex-r jc-start item-width',
                valueClassName: 'ml-5'
              }
            )} */}
            {/* {getItems(
              '加油包',
              getCurrentCardPackOrderDetail('fuelpack', 'num') + 'G',
              // '10G',
              {
                boxClassName: 'd-flex-r jc-start item-width',
                valueClassName: 'ml-5'
              },
              <Popover
                position="tl"
                style={{ maxWidth: '620px', maxHeight: '300px', overflowY: 'auto' }}
                content={
                  <div>
                    <div className="d-flex-r border-bottom pb-10 mb-10 font-widget-600">
                      <div className="w-150 pl-10">套餐</div>
                      <div className="w-180 pl-10">激活时间</div>
                      <div className="w-80">流量总额 </div>
                      <div className="w-80">订单金额</div>
                      <div className="w-80">实付金额</div>
                      <div className="w-80">总期数</div>
                      <div className="w-80">当前期数</div>
                    </div>
                    {getCurrentCardPackOrderDetail('fuelpack')?.map((i: any, idx: number) => (
                      <div key={idx} className="d-flex-r border-bottom pb-10 mb-10">
                        <div className="w-150 omit-text pl-10" title={i.packDetailName}>{i.packDetailName}</div>
                        <div className="w-180 omit-text pl-10" title={i.activateTime}>
                          {dayjs(i.activateTime).format('YYYY-MM-DD')}
                        </div>
                        <div className="w-80 omit-text" title={i.totalFlow}>{flowKTOG(i.totalFlow)}G</div>
                        <div className="w-80 omit-text" title={i.orderPrice}>{i.orderPrice}</div>
                        <div className="w-80 omit-text" title={i.realPrice}>{i.realPrice}</div>
                        <div className="w-80 omit-text" title={i.totalPhases}>{i.totalPhases}</div>
                        <div className="w-80 omit-text" title={i.thisPhases}>{i.thisPhases}</div>
                      </div>
                    ))}
                  </div>
                }
              >
                <IconSearch className="vertical-align-top cursor-pointer" style={{ width: 24, height: 24 }} />
              </Popover>

            )} */}
            {getItems(
              '总流量',
              `${flowKTOG(details.totalFlow).toFixed(2)}G`,
              {
                boxClassName: 'd-flex-r jc-start item-width',
                valueClassName: 'ml-5'
              }
            )}
            {getItems(
              '本期套餐',
              <>
                {/* <div>【{getCurrentCardPackOrderDetail('basicpackage', 'name')!!}】</div> */}
                <div>【{details?.packageName!!}】</div>
                <div className='text-color-91929E font-weight-500 font-12 font-family-Regular'>
                  {/* {getCurrentCardPackOrderDetail('basicpackage', 'time')!} */}
                  {details?.obsoleteTime!!}
                </div>
              </>,
              {
                boxClassName: 'd-flex-r jc-start item-width',
                valueClassName: 'ml-5'
              }
            )}
            {getItems(
              '余额',
              `${details.balance ?? 0}元`,
              {
                boxClassName: 'd-flex-r jc-start item-width',
                valueClassName: 'ml-5'
              }
            )}
            {/* {getItems(
              '自动续订',
              <>
                {`${details.renewalStatus === 'Y' ? '是' : '否'}`}
                <Switch className="ml-5" size="small" checked={details.renewalStatus === 'Y'} onChange={() => handleRenewal(details)} />
              </>,

              {
                boxClassName: 'd-flex-r jc-start item-width',
                valueClassName: 'ml-5'
              }
            )} */}
            {getItems(
              '下期套餐',
              <>
                <div>【{details.nextPackageName || '--'}】</div>
                {/* <div className='text-color-91929E font-weight-500 font-12 font-family-Regular'>
                  {getTime()}
                </div> */}
              </>,
              {
                boxClassName: 'd-flex-r jc-start item-width',
                valueClassName: 'ml-5'
              }
            )}
            {/* {getItems(
              '活动金额',
              `${activeAmount.toFixed(2)}元`,
              {
                boxClassName: 'd-flex-r jc-start item-width',
                valueClassName: 'ml-5'
              }
            )} */}
            {/* {getItems(
              '卡券明细',
              <span className="ml-5 cursor-pointer">{`${details?.payCouponCardUsers?.length ?? 0}张`}</span>,
              {
                boxClassName: 'd-flex-r jc-start item-width',
                valueClassName: 'ml-5'
              },
              <Popover
                position="tl"
                style={{ maxWidth: '520px', maxHeight: '300px', overflowY: 'auto' }}
                content={
                  <div>
                    <div className="d-flex-r border-bottom pb-10 mb-10 font-widget-600">
                      <div className="w-180 pl-10">优惠券名称</div>
                      <div className="w-180 pl-10">满减条件</div>
                      <div className="w-80">总数</div>
                      <div className="w-80">已使用</div>
                      <div className="w-80">已过期</div>
                      <div className="w-100">过期时间</div>
                    </div>
                    {couponSumList.map((i, idx) => (
                      <div key={idx} className="d-flex-r border-bottom pb-10 mb-10">
                        <div className="w-180 omit-text pl-10">{i.name}</div>
                        <div className="w-180 omit-text pl-10">
                          {!!i.premiseAmount && !!i?.reduceAmount
                            ? `满${i.premiseAmount}减${i?.reduceAmount}元`
                            : '--'}
                        </div>
                        <div className="w-80 omit-text">{i.count}</div>
                        <div className="w-80 omit-text">{i.used}</div>
                        <div className="w-80 omit-text">{i.expired}</div>
                        <div className="w-100 omit-text">{i.expireStr}</div>
                      </div>
                    ))}
                  </div>
                }
              >
                <IconSearch className="vertical-align-top cursor-pointer" style={{ width: 24, height: 24 }} />
              </Popover>
            )} */}
          </div>


          <div className={`p-10 ${activeTab === '处理中任务' ? 'bg-white' : ''} margin-t-10`}>
            <div className='bw-100  d-flex-r ai-start  jc-between  page-box home-tabs'>
              <div style={tabsList.length >= 5 ? { width: 'calc(100% - 70px)' } : { width: '100%' }} className='tabs-l'>
                {
                  tabsList?.map(item => {
                    return <div key={item.title} className={`tab-item cursor-pointer ${activeTab === item.title ? 'tag' : ''}`} onClick={() => {
                      setactiveTab(item.title)
                      item.onClick()
                    }}>{item.title}</div>
                  })
                }
              </div>
              {
                tabsList.length >= 5 && <span className='bg-white vertical-align-middle text-center position-relative tabs-r'>
                  <Popover
                    trigger='click'
                    position="bottom"
                    content={
                      tabsList?.map(i => {
                        return <div className="bg-white item-width2 omit-text button" title={i.title} key={i.title}>
                          <span onClick={() => {
                            setactiveTab(i.title)
                            i.onClick()
                          }}
                            className='d-inline-block text-left cursor-pointer w-100 omit-text vertical-align-middle'
                            title={i.title}>
                            {i.title}
                          </span>
                          <img className='w-24 ml-15 vertical-align-middle cursor-pointer' src="/pic/up.png" alt="" />
                          <img className='w-24 ml-5 vertical-align-middle cursor-pointer' src="/pic/down.png" alt="" />
                          <img className='w-24 ml-5 vertical-align-middle cursor-pointer' src="/pic/closeEye.png" alt="" />
                        </div>
                      })
                    }
                  >
                    <div className="bh-100 bw-100" title={"更多"} key={"更多"}>
                      <img src="/pic/setUp.png" alt="" className='setUp' />
                    </div>
                  </Popover>

                </span>
              }
            </div>
            <div className='bw-100  d-flex-r ai-start  jc-between  page-box home-tabs'>
              {tabsList?.find(item => item.title === activeTab)?.children || null}
            </div>
          </div>
        </div>
      </div>
      {!!giveCouponDialogShow && <ViewFrozenStatusDialog
        id={details.id}
        onCancel={(v?: boolean) => {
          setgiveCouponDialogShow(false)
          getDetails()
        }}
      />}
      {!!cardDetailProgressDialogShow && (
        <CardDetailProgressDialog
          id={cardDetailProgressDialogShow}
          onCancel={() => {
            setCardDetailProgressDialogShow(undefined);
            getDetails()
          }}
        />
      )}
      {!!importDialogShow && (
        <ImportFileDialog
          title="修改卡产品导入"
          taskKey="卡片详情"
          params={{}}
          onCancel={() => {
            setImportDialogShow(false);

          }}
        />
      )}
      {!!cardPayLimitRecordDialogShow && (
        <CardPayLimitRecordDialog
          item={cardPayLimitRecordDialogShow}
          onCancel={(v?: boolean) => {
            setCardPayLimitRecordDialogShow(undefined);
            if (v) {
              getDetails()
            }
          }}
        />
      )}
      {!!batchCardBuyOrderDialogShow && (
        <BatchCardBuyOrderDialog
          cardId={details.id!}
          iccid={iccid!}
          onCancel={(v?: boolean) => {
            setBatchCardBuyOrderDialogShow(false);
            // getDetails()
            // if (v) {
            //   setImportDialogShow(true);
            // }
            if (v) {
              getDetails()
            }
          }}
        />
      )}
      {!!packInfoDialogShow && (
        <CardPackInfoDialog
          cardId={packInfoDialogShow?.id?.toString() || ''}
          onCancel={() => {
            setPackInfoDialogShow(undefined);
            getDetails()
          }}
        />
      )}
      {/* 转卡申请 */}
      {transferCardCreateDialogShow && (
        <CardTransferAnyCreateDialog
          item={details}
          onCancel={(v?: boolean) => {
            setTransferCardCreateDialogShow(false)
            getDetails()
          }}
        />
      )}
      {/* 推广信息弹窗 */}
      {!!convertUrlToolDialogShow && (
        <PreSetConvertUrlDialog
          item={convertUrlToolDialogShow}
          isSave={false}
          onCancel={() => {
            setConviertUrlToolDialogShow(undefined);
            getDetails()
          }}
        />
      )}
      {/* 查看详细信息弹窗 */}
      {!!cardOtherDetailDialogShow && (
        <CardOtherDetailDialog
          iccid={iccid!}
          id={details.id!}
          onCancel={(v?: boolean) => {
            setCardOtherDetailDialogShow(false);
          }}
        />
      )}
      {/* 申请退款弹窗 */}
      {!!cardDetailWalletRefundApplyShow && (
        <CardDetailWalletRefundApplyDetailPage
          record={details}
          id={details.id ? details.id.toString() : ""}

          phone={details?.phonenumber}
          onCancel={() => {
            setcardDetailWalletRefundApplyShow(undefined);
            getDetails()
          }}
        />
      )}

    </Page>

  );
}

